<template>
  <div>
    <div class="banner">
      <el-carousel :interval="4000">
        <el-carousel-item v-for="(item,index) in bannerList" :key="index">
          <img :src="item.ImgUrl" alt @click="bannnerLink(item)" style="height:100%" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class>
      <img src="https://res.bestcake.com/images/newIndex/title.png?v=1" />
    </div>
    <div class="activeimg">
      <img :src="activityImg" alt />
    </div>

    <div>
      <ul class="icon_col">
        <li v-for="(item,index) in TopIconList" :key="index" class="icon_row">
          <img :src="item.ImgUrl" alt class="icon_img" />
          <div>{{item.ActName}}</div>
        </li>
      </ul>
    </div>
    <div class="mseeage">
      <el-tag class="msg-tag">通知</el-tag>
      <div class="msg_info">{{NoticeList}}</div>
    </div>

    <div class="centercontentlist">
      <div v-for="(item,index) in CenterContentList" :key="index">
        <div>
          <img :src="item.ImgUrl" alt srcset />
        </div>
      </div>
    </div>

    <div class="SaleList" v-for="(item,index) in SaleList" :key="index">
      <div class="bigimg">
        <img :src="item.TabImgUrl" alt />
      </div>
      <div class="SaleList-index">
        <div v-for="(items,indexs) in item.CakeLists" :key="indexs">
          <div class="salelistbox">
            <img :src="items.img" alt class="img_s" @click="todesc(items)" />
            <div>
              <el-link type="warning">{{'￥'+items.Price}}</el-link>/
              <el-link type="info">{{items.Size}}</el-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="wuyong"></div>
  </div>
</template>

<script>
import api from "../../core/api/index";

export default {
  name: "HelloWorld",
  data() {
    return {
      bannerList: [],
      activityImg: "",
      TopIconList: [],
      NoticeList: "​",
      CenterContentList: [],
      SaleList: []
    };
  },
  mounted() {
    setInterval(() => {
      var start = this.NoticeList.substring(0, 1);
      // 获取到 后面的所有字符
      var end = this.NoticeList.substring(1);
      // 重新拼接到新的字符串，并赋值给 this.msg
      this.NoticeList = end + start;
    }, 300);

    const GetIndexCakeList = {
      c: "NewIndexController",
      m: "index"
    };

    api.GetIndexCakeList(GetIndexCakeList).then(res => {
      console.log(res);
      
    
      this.bannerList = res.Tag.mainresult.SwiperBannerList;
      if( res.Tag.mainresult.AbsoluteBannerList.length>0){
 this.activityImg = res.Tag.mainresult.AbsoluteBannerList[0].ImgUrl||'';
        console.log( this.activityImg);
      }
     
      
      this.TopIconList = res.Tag.mainresult.TopIconList;
      this.NoticeList = res.Tag.mainresult.NoticeList;
      this.CenterContentList = res.Tag.mainresult.CenterContentList;

      this.SaleList = res.Tag.mainresult.SaleList;
      this.SaleList.forEach((item, index) => {
        item.CakeLists = JSON.parse(item.CakeList);
        item.CakeLists.forEach((items, indexs) => {
          if (items.Brand == "卡思客") {
            items[
              "img"
            ] = `https://res.bestcake.com/m-images/ww/jd/${items.Name}.png?v=637137500455115900`;
          } else if (items.Brand == "女神系列") {
            items[
              "img"
            ] = `https://res.bestcake.com/m-images/ww/ns/${items.Name}.png?v=637137500455115900`;
          } else if (items.Brand == "极致蛋糕") {
            items[
              "img"
            ] = `https://res.bestcake.com/m-images/ww/jz/${items.Name}.png?v=637137500455115900`;
          } else if (items.Brand == "乳品系列") {
            items[
              "img"
            ] = `https://res.bestcake.com/m-images/ww/rp/${items.Name}.png?v=637137500455115900`;
          }
        });
      });

      console.log(this.SaleList);
    });
  },
  methods: {
    bannnerLink(item) {
      console.log(item);
    },
    test() {
      this.$eventHub.$emit("sub", { name: "Msea" });
    },
    todesc(item) {
      console.log(item);
      
this.$router.push({ path: '/desc', query: {id:item.Id,name:item.Name} })
    }
  }
};
</script>

<style lang="scss" >
.wuyong {
  height: r(100);
}
.el-carousel__container {
  position: relative;
  height: r(200);
}
.activeimg {
  margin: r(10);
}
.banner {
  height: r(200);
  margin: r(10);
}

.icon_col {
  display: flex;
  flex-wrap: wrap;
  .icon_row {
    text-align: center;
    width: 25%;

    .icon_img {
      width: r(52);
      height: r(52);
      display: inline-block;
      padding: r(5) 0 r(5) r(5);
    }
  }
}

.mseeage {
  margin-top: r(15);
  height: r(40);
  border-top: r(10) solid #fafafa;
  border-bottom: r(10) solid #fafafa;
  display: flex;
  .msg_info {
    height: 100%;
    overflow: hidden;
    width: 80%;
    color: #1fb1b8;
    line-height: r(40);
  }
  .msg-tag {
    margin: r(4) r(10);
  }
}

.centercontentlist {
  display: flex;
  flex-wrap: wrap;
  padding: 0 r(12);

  div {
    img {
      height: r(100);
      width: r(168);
      padding: r(5) r(5) r(2) r(2);
    }
  }
}

.SaleList {
  .bigimg {
    padding: r(10) r(0);
  }
  .SaleList-index {
    display: flex;
    overflow: auto;
  }
  .SaleList-index::-webkit-scrollbar {
    display: none;
  }
  .salelistbox {
    text-align: center;
    width: r(140);
    height: r(150);
    margin: r(10) r(0);

    margin-left: r(10);
    margin-right: r(10);
    padding: r(40) r(5);
    box-shadow: 0 r(2) r(4) rgba(0, 0, 0, 0.12), 0 0 r(6) rgba(0, 0, 0, 0.04);
    .img_s {
      width: r(120);
      height: r(120);
      display: inline-block;
    }
  }
}
</style>

